<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            width:88vw;
            height:100vh;
            /* background-image: url(b.jpg);  */
            /* background-repeat:no-repeat; */
        }
        #shang{
            width: 88vw;
            height:93vh;
            display: flex;
            flex-direction: column;
            flex-wrap:wrap;
            justify-content:start;
            align-content: start;
            background-image: url(b.jpg); 
            background-repeat:no-repeat;
        }
        #shang>div{
            width:5vw;
            height:6vw;
            text-align: center;
        }
        #xia{
            width:88vw;
            height:7vh;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: end;
            background-color: #464646;
        }
        #left{
            width:44vw;
            height:3vw;
            display: flex;
            justify-content: start;
            align-items: end;
        }
        #right{
            width:44vw;
            height:3vw;
            display: flex;
            justify-content: end;
            align-items: end;
        }
        #shang>div:active{
            background-color:#9fbcd2 ;
        }
    </style>
</head>

<body>
    <div id="ping">
        <div id="shang">
            <div >
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>此电脑</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>微信图片</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>网络</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>Photoshop</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>回收站</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>夸克网盘</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>控制面板</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>腾讯QQ</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>火绒安全软件</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>百度网盘</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>微软电脑管家</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>稻壳阅读器</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>酷狗音乐</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>Axure</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>QQ游戏</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>Steam</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>VNC</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>壁纸</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>网易UU加速器</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>GPT Chorme</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>微信</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>jcpicker</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>Miscrosoft</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>Visual Studio Code</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>Snioaste</p>
                </div>
            </div>
            <div>
                <div><img src="a.png" alt=""></div>
                <div>
                    <p>banana</p>
                </div>
            </div>
        </div>
        <div id="xia">
            <div id="left">
                <div><img src="a.png" alt=""></div>
                <div><img src="a.png" alt=""></div>
                <div><img src="a.png" alt=""></div>
                <div><img src="a.png" alt=""></div>
            </div>
            <div id="right">
                <div><img src="a.png" alt=""></div>
                <div><img src="a.png" alt=""></div>
                <div><img src="a.png" alt=""></div>
                <div><img src="a.png" alt=""></div>
                <div><img src="a.png" alt=""></div>
            </div>
        </div>
    </div>
</body>

</html>